<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>visibility: hidden 示例</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: lightcoral;
        }

        .hidden-box-wrapper {
            border: 1px solid #000;
        }

        .hidden-box {
            visibility: hidden;
        }

        .opacity-zero {
            opacity: 0;
        }
    </style>
</head>

<body>
    <h1>visibility: hidden 特性演示</h1>
    <div class="box">可见的盒子,点击会有提示</div>
    <div class="hidden-box box">
        <div class="box">
            hidden child box
        </div>
        <p>ssss</p>
    </div>
    <div class="box">可见的盒子</div>
    <div class="opacity-zero">opacity 0</div>
    <div class="box">可见的盒子</div>

    <script>
        const visibleBox = document.querySelector('.box');
        const hiddenBox = document.querySelector('.hidden-box');
        const opacity0Box = document.querySelector('.opacity-zero');

        visibleBox.addEventListener('click', function () {
            alert('你点击了可见的盒子');
        });

        hiddenBox.addEventListener('click', function () {
            alert('你点击了隐藏的盒子（visibility: hidden）');
        });

        opacity0Box.addEventListener('click', function () {
            alert('你点击了隐藏的盒子 opacity 0 Box ');
        });
    </script>
</body>

</html>